<!--
 * @Author: your name
 * @Date: 2021-08-05 10:54:59
 * @LastEditTime: 2021-08-05 11:15:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\轮播图组件.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
    <script src="./components/swiper.js"></script>
  </head>
  <body>
    <div id="app">
      <swiper-header :list="imglist"></swiper-header>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            imglist: [
              "http://p1.music.126.net/QYNi1MWZu98KhYGC3fgE-A==/109951166129589746.jpg?imageView&quality=89",
              "http://p1.music.126.net/X9oObuw2u0HAimURm91HDg==/109951166124747408.jpg?imageView&quality=89",
              "http://p1.music.126.net/ZrX2nooipBoKOJeRxWtT6w==/109951166127135470.jpg?imageView&quality=89",
              "http://p1.music.126.net/ZyjpV-MToefd1HKpBxcRtA==/109951166127170984.jpg?imageView&quality=89",
              "http://p1.music.126.net/UmWr_EMHWCmPHWVuGk2QeA==/109951166127166143.jpg?imageView&quality=89",
            ],
          };
        },
      });
    </script>
  </body>
</html>
